<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/G-homepage.css">
</head>
<body class="body">
    <div class="nav-fixed">
        <div class="nav login-nav">
            <a class="mui-icon mui-icon-back" href="./index.html">
            </a>
            <h1>猫眼电影</h1>
        </div>
    </div>
    <div class="option-menu">
        <div class="menu-bottom">
            <div id="segmentedControl"
                class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                <a class="mui-control-item mui-active login-select" href="#item1">
                    美团账号
                </a>
                <a class="mui-control-item login-select" href="#item2">
                    手机验证登录
                </a>
            </div>
        </div> 
    </div>
    <div>
        <div id="item1" class="mui-control-content mui-active">
            <div id="scroll" class="mui-scroll-wrapper" data-scroll="1">
                <div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <!-- 登录input输入框 -->
                    <div class="login-input">
                        <div class="mui-input-row">
                            <input type="text" placeholder="账户名/手机号/Email">
                            <input type="password" placeholder="请输入您的密码">
                        </div>
                    </div> 
                    <!-- 登录按钮 -->
                    <div class="login-button">登录</div>
                    <div class="sign-in">
                        <div class="sign-in-sign">立即注册</div>
                        <div class="password">找回密码</div>
                    </div>
                    <div class="login-service">© 猫眼电影 客服电话：<span>1010-5335</span></div>
                </div>
            <div class="mui-scrollbar mui-scrollbar-vertical"><div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: block; height: 25px; transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div></div></div>
        </div>
        <div id="item2" class="mui-control-content">
             <!-- 登录input输入框 -->
             <div class="login-input">
                <div class="mui-input-row phone-input">
                    <div class="verification phone-login-button">发送验证码</div>
                    <input type="text" placeholder="请输入手机号">
                    <input type="text" placeholder="请输入短信验证">
                </div>
            </div> 
            <!-- 登录按钮 -->
            <div class="login-button phone-login-button">登录</div>
            <div class="sign-in">
                <div class="sign-in-sign">立即注册</div>
                <div class="password">找回密码</div>
            </div>
            <div class="login-service">© 猫眼电影 客服电话：<span>1010-5335</span></div>
        </div>
    </div>
</body>
<script src="js/mui.min.js"></script>
<script>
    (function () {
        function w() {
            var all = document.documentElement;
            var test = all.getBoundingClientRect().width;
            console.log(123, test)
            if (test > 1000) {
                test = 1000;
            }
            rem = test / 18.75;
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();
</script>
</html>